<template>
  <view class="queryWelfare">
    <uni-nav-bar title="查询" color="#333" left-icon="left" @clickLeft="navBack" statusBar></uni-nav-bar>
    <!-- 领取列表 -->
    <template v-if="hasUser">
      <WelfareList :userList="list" @tabUser="tabUser"></WelfareList>
      <view class="WelfareBottom">
        <view @click="tabLvent('business')">业务明细</view>
        <view @click="tabLvent('welfare')">福利发放明细</view>
      </view>
    </template>
    <view v-else style="height: 90vh">
      <!-- TODO -->
      <u-empty text="暂无查询号码" mode="list"></u-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import WelfareList from '@/components/welfare/welfareList.vue';
import { userList } from '@/gql/welfare';
import { navBack, navTo } from '@/utils/navigator';
import { showToast } from '@/utils/prompt';
import { onLoad } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import { computed, Ref, ref } from 'vue';

// static
const list = ref([]); //查询人员列表
const hasUser = computed(() => list.value.length > 0);
const phone: Ref<number> = ref(null); //查询的手机号码
const userId: Ref<number> = ref(null); //用户信息

onLoad((options) => {
  phone.value = Number.parseInt(options.phone);
  submit();
});

/**
 * 获取查询到的用户
 */
function submit() {
  const payload = {
    query: userList,
    variables: {
      mobile: phone.value,
    },
  };
  toPublish('ql/welfare/driverList', payload, (obj: any) => {
    const { driver_list } = obj.data;
    list.value = driver_list;
  });
}
/**
 * @param {Object} num 存储选中的领取福利的人员
 */
function tabUser(num) {
  userId.value = num;
  uni.setStorageSync('welfareId', num);
}
/**
 * @param {Object} num 业务明细/福利发放明细
 */
function tabLvent(num) {
  if (!userId.value) {
    showToast('请选择您要查询的用户');
    return;
  }
  switch (num) {
    case 'business':
      navTo(`welfare/business?userID=${userId.value}`);
      break;
    case 'welfare':
      navTo(`welfare/record?userID=${userId.value}`);
      break;
  }
}
</script>

<style lang="less">
@import url('../welfare/less/queryWelfare.less');
</style>
